<template>
  <div class="bj">
    <div class="tlte">
      <div class="wz">
        <span>长三角金融联盟链</span>
      </div>
    </div>
    <div class="zg">
      <img src="@/assets/zg.png" width="60%" />
      <div class="gljr">
        <div class="kh">跨行票据贴现</div>
        <div class="jr">
          <el-button
            style="width: 220px; height: 52px"
            type="primary"
            round
            @click="goInto()"
            >进入</el-button
          >
        </div>
        <div class="sf">
          <el-radio v-model="radio" label="1">企业身份</el-radio>
          <el-radio v-model="radio" label="2">银行身份</el-radio>
          <el-radio v-model="radio" label="3">管理员身份</el-radio>
        </div>
      </div>
    </div>
    <!-- <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" @click="goInto()">
          <img src="@/assets/zj.png"  />
          <div class="gljr">
            <div class="kh">跨行票据贴现</div>
            <div class="jr">
              <el-button type="primary" round>进入</el-button>
            </div>
            <div class="sf">
              <el-radio v-model="radio" label="1">企业身份</el-radio>
              <el-radio v-model="radio" label="2">银行身份</el-radio>
              <el-radio v-model="radio" label="2">管理员身份</el-radio>
            </div>
          </div>
        </div>
        <div class="swiper-slide" @click="goInto()">
          <img src="@/assets/p1.png"  />
          <span class="jqqd">敬请期待</span>
        </div>
        <div class="swiper-slide" @click="goInto()">
          <img src="@/assets/p1.png"  />
          <span class="jqqd">敬请期待</span>
        </div>
      </div>
     
      <div class="swiper-pagination" style="position: fixed; bottom: 16%"></div>
    </div> -->
  </div>
</template>
<script>
import Swiper from "swiper";
import { route1, route2, route3 } from "@/router/index.js";
export default {
  components: {},
  data() {
    return { radio: "1" };
  },
  mounted() {
    this.$nextTick(() => {
      new Swiper(".swiper-container", {
        slidesPerView: 3,
        spaceBetween: 30,
        centeredSlides: true,
        loop: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        swiperOptions: {
          autoHeight: true,
        },
      });
    });
  },
  methods: {
    // 点击
    goInto() {
      let rad = this.radio;
      this.$store.commit("permission/SET_Client", rad);
      localStorage.setItem("clientType", rad);
      if (rad == 1) {
        this.$router.addRoutes(route1);
        // this.$router.push({ name: "HomePage" });
        this.$router.push({
         name: "HomePage" ,
          // query: { rad: rad },
        });
      } else if (rad == 2) {
        this.$router.addRoutes(route2);
        this.$router.push({
          path: "/login",
          // query: { rad: rad },
        });
        // this.$router.push({name:'CustomerHomePage'})
      } else if (rad == 3) {
        this.$router.addRoutes(route3);
        this.$router.push({
          path: "/login",
    
    
        });
        // this.$router.push({name:'MageHomePage'})
        // this.$router.addRoutes("MageHomePageHomePage");
      }
      console.log(1111);
      // this.$router.addRoutes({
      //   name: "HomePage",
      //   params: {
      //     // id: id
      //   },
      // });
    },
  },
};
</script>

<style acoped>
html,
body {
  width: 100%;
  height: 100%;
}
.bj {
  /* width: 100%;
  margin: 0;
  padding: 0;
  background: url("../assets/rukou.jpg");
 background-size:cover; */
  height: 100%;
  background: url("../assets/bj.png") no-repeat;
  background-size: 100% 100%;
  overflow-y: auto;
}
/* .tubu{
   background: url("../assets/t111.png") no-repeat;
   background-size: 100% 100%;
       height:240px;
} */
.gljr {
  width: 100%;
  /* height: 400px;
    background-image: url(/static/img/zg.fdafb4b.png);
    background-size: cover; */
  text-align: center;
}
.sf {
  position: absolute;
  bottom: 0;
  font-size: 14px;
  white-space: nowrap;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 42px;
}
.el-radio {
  margin-right: 0px !important;
}
.tlte {
  height: 282px;
  line-height: 249px;
  background-image: url(/static/img/tilw2.c259b3a.png);
  /* background-size: 100%; */
  background-position: center bottom;
  position: fixed;
  width: 100%;
  left: 0;
  top: 10%;
  transform: translateY(-50%);
  text-align: center;
}
.kh {
  height: 28px;
  font-size: 28px;
  font-family: Source Han Sans CN;
  font-weight: 800;
  color: #222da4;
  position: absolute;
  top: 13%;
  bottom: 0;
  margin: 0 auto;
  left: 0;
  right: 0;
}
.jr {
  position: absolute;
  bottom: 20%;
  left: 0;
  right: 0;
}
/* .el-button.is-round {
  width: 220px !important;
  height: 40px !important;
} */
.jqqd {
  position: fixed;
  height: 24px;
  font-size: 25px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
}

.wz {
  font-size: 30px;
  font-weight: 600;
  color: #ffffff;
  text-align: center;
}
.swiper-container {
  padding-top: 6%;
  width: 100%;
}
.swiper-slide {
  cursor: pointer;
  text-align: center;
  font-size: 18px;
  /* background: rgb(199, 38, 113); */
  /* width: 30%;
  background: linear-gradient(0deg, #0aeef3, #00696d, #01bcb1, #222da4); */
  /* border-radius: 8px; */
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  transition: 300ms;
  transform: scale(0.8);
}
.swiper-slide-active,
.swiper-slide-duplicate-active {
  transform: scale(1);
}

.swiper-pagination-bullet {
  width: 20px;
  height: 20px;
  display: inline-block;
  border-radius: 100%;
  background: #ffffff;
}

.swiper-pagination-bullet-active {
  background-color: #11e5e0;
}
.zg {
  position: fixed;
  width: 100%;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
}
/* .zg span {
  margin: 0 auto;
} */
</style> 